<template>
  <CloudTreeSelect
    v-model="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
  >
    <CloudTreeSelectNode key="0-1" value="parent 1" title="parent 1">
      <CloudTreeSelectNode key="0-1-1" value="parent 1-0" title="parent 1-0">
        <CloudTreeSelectNode
          key="random"
          :selectable="false"
          value="leaf1"
          title="my leaf"
        />
        <CloudTreeSelectNode key="random1" value="leaf2" title="your leaf" />
      </CloudTreeSelectNode>
      <CloudTreeSelectNode key="random2" value="parent 1-1" title="parent 1-1">
        <CloudTreeSelectNode key="random3" value="sss">
          <b slot="title" style="color: #08c">sss</b>
        </CloudTreeSelectNode>
      </CloudTreeSelectNode>
    </CloudTreeSelectNode>
  </CloudTreeSelect>
</template>

<script>

export default {
  title: '7.CloudTreeSelectNode',
  data() {
    return {
      value: undefined,
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
</style>